<template>
    <div class="agent-dashboard">
      <!-- 头部信息 -->
      <el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
            <el-breadcrumb-item :to="{ path: '/ManageHome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>聊天应用</el-breadcrumb-item>
            <el-breadcrumb-item>应用管理</el-breadcrumb-item>
        </el-breadcrumb>
      <el-card class="header-card">
        <div class="header-content">
          <div class="avatar-section">
            <el-avatar :size="60" src="https://example.com/avatar.png" />
            <div class="agent-info">
              <h2>智能体名称</h2>
              <p>创建时间：2023-08-01</p>
            </div>
          </div>
          <div class="description-section">
            <el-tag type="info">对话型AI</el-tag>
            <p class="description">智能体描述信息...</p>
          </div>
        </div>
      </el-card>
  
      <!-- 主体三列布局 -->
      <el-row :gutter="20" class="main-content" style="margin-left: 15px;max-width: 100vw;">
        <!-- 第一列：提示词 -->
        <el-col :span="6">
          <el-card class="box-card" header="提示词设置">
            <el-input
              type="textarea"
              :rows="15"
              placeholder="请输入系统提示词"
              v-model="promptText"
            ></el-input>
          </el-card>
        </el-col>
  
        <!-- 第二列：基础设置 -->
        <el-col :span="8">
          <el-card class="box-card" header="基础配置">
            <el-form :model="form" label-width="100px">
              <el-form-item label="选择模型" style="margin-bottom: 10px;">
                <el-select v-model="form.model" placeholder="请选择模型">
                  <el-option style="margin-left: 10px;"
                    v-for="item in modelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
  
              <el-form-item label="知识库" style="margin-bottom: 10px;">
                <el-select
                  v-model="form.knowledgeBases"
                  multiple
                  placeholder="请选择知识库"
                >
                  <el-option
                  style="margin-left: 10px;"
                    v-for="item in knowledgeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
  
              <el-form-item label="开场白">
                <el-input
                  type="textarea"
                  :rows="3"
                  v-model="form.opening"
                  placeholder="请输入开场白"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
  
        <!-- 第三列：对话测试 -->
        <el-col :span="9">
          <el-card class="box-card" header="对话测试">
            <chatV2 style="height: 62vh;" :chatData="messages" @send-message="handleUserMessage"></chatV2>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
import chatV2 from '@/components/chatV2.vue';
  export default {
    components:{
      chatV2
    },
    data() {
      return {
        // 提示词
        promptText: '',
        
        // 基础设置表单
        form: {
          model: '',
          knowledgeBases: [],
          opening: ''
        },
        
        // 模型选项
        modelOptions: [
          { value: 'gpt-3.5', label: 'GPT-3.5' },
          { value: 'gpt-4', label: 'GPT-4' }
        ],
        
        // 知识库选项
        knowledgeOptions: [
          { value: 'kb1', label: '产品文档' },
          { value: 'kb2', label: '客服知识库' }
        ],
        
        // 对话消息
        messages: [],
        chosedModelId: 1,
            choseModelName: null,
            allModel: [{
                id: 1,
                name: "豆包",
            },
            {
                id: 2,
                name: "openAi",
            },
            {
                id: 2,
                name: "qianfan",
            }
            ],
            chosedAppId: null,
            choseAppName: null,
            allApp: [{
                id: 1,
                name: "客服",
            },
            {
                id: 3,
                name: "企业文化",
            },
            {
                id: 3,
                name: "开发知识",
            }
            ],
            messages: [{
                content: '你好请问有什么可以帮助你',
                isUser: false,
                timeStamp: '2023-07-20T09:00:00'
            }]
      };
    },
    methods: {
      async handleUserMessage(userMessage) {
            // 添加用户消息
            this.messages = [...this.messages, userMessage]

            // 模拟AI回复
            const aiResponse = {
                content: '正在思考...',
                role: 'ai',
                timestamp: new Date().getTime()
            }

            this.messages = [...this.messages, aiResponse]

            // 这里实际应该调用API获取回复
            const realResponse = await this.getAIResponse(userMessage.content)

            // 替换临时消息
            this.messages = this.messages.map(msg =>
                msg.content === '正在思考...' ? realResponse : msg
            )
        },
        async getAIResponse(query) {
            // 这里实现实际的API调用逻辑
            return {
                content: `这是对【${query}】的模拟回复\n\`代码示例\`\n\`\`\`javascript\nconsole.log("Hello World")\n\`\`\``,
                role: 'ai',
                timestamp: new Date().getTime()
            }
        }
    }
  };
  </script>
  
  <style scoped>
  * {
    padding: 0 0;
    margin: 0 0 ;
  }
  .header-card {
    margin-bottom: 10px;
    max-height: 14vh;
  }
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .avatar-section {
    display: flex;
    align-items: center;
  }
  
  .agent-info {
    margin-left: 15px;
  }
  
  .description-section {
    max-width: 400px;
  }
  
  .box-card {
    margin-bottom: 10px;
    height: calc(100vh - 180px);
  }
  </style>